Tutorials
Getting started
Chart interface
Web components
Chart internals
Data integration
Customization
Frameworks and bundlers
Mobile development
Plug-ins
Troubleshooting
Glossary
Reference
JSFiddles

Installing the Library Using npm

As of Version 7.2.0, the ChartIQ library archive contains a tarball (.tgz file) that enables you to install the charting library using npm.

To install the library

  1. Obtain a copy of the library, and extract the archive (.zip file)

  2. Copy the tarball (chartiq-x.x.x.tgz) to your project folder

    Note: The folder must contain a package.json file.

  3. Install the library from the tarball using npm, for example:

    npm install ./chartiq-x.x.x.tgz

Your package.json file should now contain the following dependency:

"chartiq": "file:chartiq-x.x.x.tgz",

Note: The chartiq dependency does not support version ranges using tilde or caret prefixes. When you upgrade the charting library — including patch releases — you must replace the installed version with the new version. We recommend that you always remove the old version of the chartiq package completely, and then install the new version, for example:

npm uninstall chartiq
npm install ./chartiq-x.x.x.tgz

Including all necessary files

The ChartIQ library includes a variety of file types: JavaScript files, CSS files, and image files of various kinds.

npm does not provide a way to load assets such as CSS and image files; you need to explicitly load them. You can use any solution you prefer, such as <link> tags, src attributes, or module bundlers such as webpack.

"Hot swapping" the keyfile

As of Version 9.0.0, the library archive also contains a keyfile that supplies your license key and entitlement information. It also allows you to extend or change the terms of your license without having to uninstall and reinstall the library or to replace all the locked files.

After you install the tarball, you will find the keyfile at node_modules/chartiq/key.js. (You can also find a copy in the chartiq/ folder after you unzip your library archive.) Your account manager will email you an updated keyfile. Simply replace the current keyfile with this new one — essentially "hot swapping" the keyfile.

Configuring keyfile "hot swapping" in a compiled app

If you are not bundling your code with a compiler, hot swapping will work right out of the box. However, if you are using a framework, bundling with webpack, or otherwise compiling your app, you need to do some initial configuration to enable hot swapping the keyfile without having to rebundle and redeploy your app.

Note: If you are actually upgrading the library, you will need to uninstall and reinstall, as explained above.

There are three main steps to enabling this feature:

  1. Manually deploy the keyfile somewhere outside your compiled bundle.

    • You might modify your webpack build to include a plugin or some script to copy in the keyfile into your build. Or you might deploy the keyfile to a separate server.
    • If you are demoing a trial version of ChartIQ, you can just move the file into a location where your top-level html file can access it (such as the public folder in our sample React project).

  2. In the <head> element of your page template (i.e. index.html), apply key.js as a module by adding a <script> tag with "module" as its type and the location of key.js as its source. For example:

    <head>
    <!-- other code -->
    <script type="module"
        src="<your deployed keyfile's location>">
    </script>
</head>

    This will automatically add the function getLicenseKey to the global window object.

    Note: Your script tag needs to be in the head so that it runs before getLicenseKey is called.

  3. In a chart container (e.g. Core.jsx in the folder react-components/src/Chart/Core.jsx in our sample React project):

    • Edit chartiq/key.js and delete or comment out the line that imports getLicenseKey.
    • Update the next line to call getLicenseKey from the global windows object.

    Note: If you are working with one of our sample framework projects, make sure you add this change to a component that loads before any others without this change. (The React project, for example, will error out if you update a component in src/containers without also updating one in react-components/src/Chart, which loads first.)

Example webpack configuration

The chartiq folder of your library contains sample webpack configuration files, including webpack.config.js, package.json, and a src folder that contains sample-template-webpack.js and index.html. Together, these files can be used to create a bundle from the ChartIQ library.

To create the example webpack bundle, run the following commands from the chartiq directory of your library:

  • npm ci
  • npm run build

See the Module Bundlers tutorial for more details.

Already using npm?

Already using npm?

If you had previously been using a custom solution to load the library as an npm package, you may need to revert your own solution to have everything working correctly. It may also be necessary to change any aliases that you have created. If you need any help migrating, please contact support@chartiq.com.

Next steps